<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { graphic } from "echarts/core";
import { countUserNum } from "@/api";
import {ElMessage} from "element-plus"
import { companyXunjianshu } from "@/api/daping/index.js";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const props = withDefaults(
    defineProps<{
        config: object | any;
        data: Array<{
            name: string;
            value: string | number;
        }>;
    }>(),
    {
        config: () => { },
        data: () => [],
    }
);
watch(
    () => props.data,
    (newval: any) => {
        //calcData();
    },
);

onMounted(() => {
    console.log("22222");
    console.log(props.data)
});

const option = ref(0);
const getData = () => {
  companyXunjianshu(props.data)
    .then((res) => {
      console.log("中下--安装计划222222", res.success);
      if (res.data) {
        setOption(res.data.monthly_data);
      } else {
        ElMessage({
          message: res.msg,
          type: "warning",
        });
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
const setOption = async (newData: any) => {
  option.value = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
      
    },
    legend: {
      data: ["月巡检数"],
      textStyle: {
        color: "#B4B4B4",
      },
      top: "0",
    },
    grid: {
      left: "50px",
      right: "40px",
      bottom: "30px",
      top: "20px",
    },
    xAxis: {
      data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      axisLine: {
        lineStyle: {
          color: "#B4B4B4",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },

        axisLabel: {
          formatter: "{value}",
        },
      },
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },
        axisLabel: {
          formatter: "{value} ",
        },
      },
    ],
    series: [
      
      {
        name: "月巡检数",
        type: "line",
        smooth: false,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 8,
        yAxisIndex: 1,
        itemStyle: {
          color: "#F02FC2",
        },
        data: newData,
      },
    ],
  };
};
onMounted(() => {
  getData();
});
</script>

<template>
  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
</template>

<style scoped lang="scss">
body{
  height: calc(100% - 38px)
}
</style>
